<template>
	<vk-data-dialog
		v-model="value.show"
		:title="page.title"
		:top="page.top"
		:width="page.width"
		mode="form"
		@open="onOpen"
		@closed="onClose"
	>
		<!-- 页面主体内容开始 -->
		<vk-data-form
			ref="form1"
			v-model="form1.data"
			:form-type="value.mode"
			:rules="form1.props.rules"
			:action="form1.props.action"
			:columns="form1.props.columns"
			:loading.sync="form1.props.loading"
			:labelWidth="form1.props.labelWidth"
			:show-cancel="page.showCancel"
			:cancel-text="page.cancelText"
			:submit-text="page.submitText"
			@success="onFormSuccess"
		>
			<template v-slot:buyer_info="{ form, keyName }">
				<view style="height: 36px;display: flex;align-items: center;">
					<image :src="value.item.buyer_info.avatar" style="width: 50px;height: 50px;border-radius: 50%;" mode="aspectFill"></image>
					<view style="margin-left: 10px;">{{ value.item.buyer_info.nickname }}</view>
				</view>
			</template>

			<template v-slot:refund_info="{ form, keyName }">
				<view style="padding: 0 30px;" v-loading="loading">
					<view>
						<text>申请时间</text><text style="margin-left: 10px;">{{ vk.pubfn.timeFormat(refundInfo.apply_refund_time) }}</text>
					</view>
					<view>
						<text>退款原因</text><text style="margin-left: 10px;">{{ refundInfo.refund_reason }}</text>
					</view>
					<view>
						<text>用户留言</text><text style="margin-left: 10px;">{{ refundInfo.refund_desc || "无" }}</text>
					</view>
					<view v-if="refundInfo.express_name">
						<text>寄回的快递公司</text><text style="margin-left: 10px;">{{ refundInfo.express_name || "无" }}</text>
					</view>
					<view v-if="refundInfo.express_no">
						<text>寄回的快递单号</text><text style="margin-left: 10px;">{{ refundInfo.express_no || "无" }}</text>
					</view>

					<el-image v-for="(item,index) in refundInfo.images" :key="index" style="height: 60px;margin: 4px;padding: 2px; border: 1px solid #bbbbbb;" mode="widthFix" :src="item" :preview-src-list="refundInfo.images"></el-image>
					<vk-data-tips v-if="refundInfo.images && refundInfo.images.length > 0" tips="点击任意图片，可进行预览"></vk-data-tips>
				</view>
			</template>

			<template v-slot:goods_list="{ form, keyName }">
				<view style="text-align: center;font-weight: bold;font-size: 17px;">本次退款商品列表</view>
				<el-table :data="form[keyName]" style="width: 100%" border>
					<el-table-column prop="image" label="商品封面" width="100">
						<template v-slot:default="{ row, column, $index }">
							<image :src="row.image" style="width: 50px;height: 50px;border-radius: 50%;" mode="aspectFill"></image>
						</template>
					</el-table-column>
					<el-table-column prop="goods_name" label="商品名称" minWidth="100"> </el-table-column>
					<el-table-column prop="sku_name" label="规格" minWidth="100"> </el-table-column>

					<el-table-column prop="refund_num" label="申请退款数量" width="130">
						<template v-slot:default="{ row, column, $index }">
							<vk-data-input-number-box v-model="row.refund_num" :precision="0" :step="1" controls-position="right" :max="maxRefundNum(row)" width="90px" size="small" @change="refundNumChange($event,row)"></vk-data-input-number-box>
						</template>
					</el-table-column>
					<el-table-column prop="refund_amount" label="申请退款金额" width="130">
						<template v-slot:default="{ row, column, $index }">
							<vk-data-input-money v-model="row.refund_amount" :precision="2" :disabled="maxRefundAmount(row,1)==0" :max="maxRefundAmount(row,1)" width="90px" size="small" :clearable="false"></vk-data-input-money>
						</template>
					</el-table-column>
				</el-table>
			</template>

			<template v-slot:refund_express_amount="{ form, keyName }">
				<vk-data-input-money v-model="form[keyName]" :precision="2" :max="maxRefundExpressAmountFn(1)" width="90px" size="small" :clearable="false"></vk-data-input-money>
				<text style="margin-left: 10px;text-decoration: underline;color: #409eff;cursor: pointer;" @click="form[keyName] = maxRefundExpressAmountFn(0)">退全部运费</text>
				<text style="margin-left: 30px;text-decoration: underline;color: #409eff;cursor: pointer;" @click="onlyRefundFreight">只退运费</text>
				<vk-data-tips :tips="'最多可退 '+maxRefundExpressAmountFn(1)+' 元运费'"></vk-data-tips>
			</template>

			<template v-slot:refund_amount="{ form, keyName }">
				<view style="font-size: 17px;font-weight: bold;color: red;">{{ vk.pubfn.priceFilter(totalRefundAmountCom)}}</view>
				<vk-data-tips tips="若同意退款，则资金会原路返回"></vk-data-tips>
			</template>


		</vk-data-form>
		<!-- 页面主体内容结束 -->
	</vk-data-dialog>
</template>

<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
export default {
	props: {
		value: {
			Type: Object,
			default: function() {
				return {
					show: false,
					mode: "",
					item: "",
					options:""
				};
			}
		}
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {
			loading:false,
			refundInfo:{
				images:[],
				refund_desc:"",
				goods_list:[]
			},
			page: {
				title: "退款审核",
				submitText: "确定",
				cancelText: "关闭",
				showCancel: true,
				top: "5vh",
				width:"900px"
			},
			form1: {
				// 表单请求数据，此处可以设置默认值
				data: {
					_id:"",
					type:1, // 1： 同意 2 拒绝
					refund_express_amount:0, // 退运费金额
					refund_amount:"", // 合计退款金额
					out_refund_no:"", // 退款单号
					status_msg:"",
					goods_list:[],
					express_name:"", // 寄回的快递公司名称
					express_no:"", // 寄回的快递公司单号
				},
				// 表单属性
				props: {
					// 表单请求地址
					action: "admin/business/sys/order.orderRefundExamine",
					// 表单字段显示规则
					columns: [
						// 常用字段类型
						{ key: "buyer_info", title: "买家信息", type: "userInfo" },
						{ key: "refund_info", title: "", type: "text-view", showLabel:false, },
						{ key: "goods_list", title: "退款商品", type: "text", showLabel:false, },

						{ key: "refund_express_amount", title: "退运费金额", type: "money", width: 200 },
						{ key: "refund_amount", title: "合计退款", type: "money-view", tips:"若同意退款，则资金会原路返回" },
						{
							key: "type", title: "处理结果", type: "radio",
							data: [
								{ value: 1, label: "同意退款" },
								{ value: 2, label: "拒绝退款" },
							]
						},
						{
						  key:"status_msg", title:"备注", type:"textarea", showRule:"type==1",
						  autosize:{ minRows:4, maxRows:10 },
						  maxlength:200,
						  showWordLimit:true,
						},
						{
						  key:"status_msg", title:"拒绝原因", type:"textarea", showRule:"type==2",
						  autosize:{ minRows:4, maxRows:10 },
						  maxlength:200,
						  showWordLimit:true,
						}
					],
					// 表单验证规则
					rules: {

					},
					labelWidth: "100px"
				}
			}
		};
	},
	mounted() {
		that = this;
		that.init();
	},
	methods: {
		// 初始化
		init() {
			let { value } = that;
			that._input(value);
		},
		_input(value){
			that.$emit("input", value);
		},
		// 监听 - 页面打开
		onOpen() {
			that = this;
			let { value={} } = that;
			let { item } = value;

			vk.callFunction({
				url: 'admin/business/sys/order.getRefundOrder',
				loading: { that, name:"loading"},
				data: {
					_id: item._id
				},
				success: (data) => {
					let refundInfo = data.info;
					that.refundInfo = refundInfo;
					that.form1.data._id = item._id;
					that.form1.data.refund_amount = refundInfo.refund_amount;
					that.form1.data.refund_goods_amount = refundInfo.refund_goods_amount;
					that.form1.data.refund_express_amount = refundInfo.refund_express_amount;
					that.form1.data.out_refund_no = refundInfo.out_refund_no;
					that.form1.data.status_msg = refundInfo.status_msg;
					that.form1.data.express_name = refundInfo.express_name;
					that.form1.data.express_no = refundInfo.express_no;
					that.form1.data.goods_list = refundInfo.goods_list.map((item, index) => {
						let goodsItem = vk.pubfn.getListItem(that.value.item.goods_sku_list, "_id", item.sku_id);
						return {
							sku_id: item.sku_id,
							refund_num: item.refund_num, // 退款数量
							refund_amount: item.refund_amount, // 退款金额
							goods_id: goodsItem.goods_id,
							image: goodsItem.image,
							goods_name: goodsItem.goods_name,
							sku_name: goodsItem.sku_name
						}
					});
				}
			});
		},
		// 监听 - 页面关闭
		onClose() {
			that.resetForm();
		},
		// 监听 - 提交成功后
		onFormSuccess(res) {
			that.close();
			vk.pubfn.objectAssignForVue(that.value.item, res.data.orderInfo, that);
			that.$emit("success");
		},
		// 打开页面
		open() {
			let { value } = that;
			value.show = true;
			that._input(value);
		},
		// 关闭页面
		close() {
			let { value } = that;
			value.show = false;
			that._input(value);
		},
		// 表单重置
		resetForm() {
			that.$refs.form1.resetForm();
		},
		// 表单提交
		submitForm() {
			that.$refs.form1.submitForm();
		},
		maxRefundNum(row){
			let that = this;
			let { sku_id } = row;
			let { buy_num, refund_num = 0 } = vk.pubfn.getListItem(that.value.item.goods_sku_list, "_id", sku_id);
			return buy_num - refund_num;
		},
		maxRefundAmount(row, type=0){
			let that = this;
			let { sku_id, refund_num } = row;
			let { real_price, should_payment_amount=0, refund_amount=0 } = vk.pubfn.getListItem(that.value.item.goods_sku_list, "_id", sku_id);
			let max = should_payment_amount - refund_amount;
			let amount = 0;
			if (type === 1) {
				amount = vk.pubfn.toDecimal(real_price * refund_num / 100, 2)
			} else {
				amount = vk.pubfn.toDecimal(real_price * refund_num, 0)
			}
			if (amount>max) {
				amount = max;
			}
			return amount;
		},
		refundNumChange(value, row){
			let that = this;
			let { sku_id } = row;
			let maxRefundAmount = that.maxRefundAmount(row);
			row.refund_amount = maxRefundAmount;
		},
		// 最大可退款的运费金额（单位元）
		maxRefundExpressAmountFn(type){
			let item = this.value.item;
			if (type == 0) {
				return vk.pubfn.toDecimal((item.amount_info.express_amount - item.amount_info.refund_express_amount), 0);
			} else {
				return vk.pubfn.toDecimal((item.amount_info.express_amount - item.amount_info.refund_express_amount) / 100, 2);
			}
		},
		onlyRefundFreight(){
			let that = this;
			that.form1.data.goods_list.map((item, index) => {
				item.refund_num = 0;
				that.refundNumChange(0,item);
			});
			if (!that.form1.data.refund_express_amount) {
				that.form1.data.refund_express_amount = that.maxRefundExpressAmountFn(0);
			}
		}
	},
	watch: {

	},
	// 计算属性
	computed: {
		// 合计商品退款金额
		totalRefundGoodsAmountCom(){
			let m = 0;
			this.form1.data.goods_list.map((item, index) => {
				m += item.refund_amount;
			});
			return m;
		},
		// 合计退款金额
		totalRefundAmountCom(){
			// 商品合计 + 运费
			return this.totalRefundGoodsAmountCom + this.form1.data.refund_express_amount;
		}
	}
};
</script>

<style lang="scss" scoped>

</style>
